import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";
import style from "./index.module.less";
export default defineComponent({
  props: {
    url: {
      type: String,
      default: "",
    },
    poster: {
      type: String,
      default: "",
    },
    muted: {
      type: Boolean,
      default: true,
    },
    controls: {
      type: Boolean,
      default: true,
    },
  },

  setup(props) {
    const video = ref<HTMLVideoElement | null>(null);
    onMounted(() => {
      if (video.value) {
        video.value.src = props.url;
        video.value.poster = props.poster;
        video.value.controls = props.controls;
        video.value.muted = props.muted;
        video.value.play();
      }
    });

    onBeforeUnmount(() => {
      // 销毁播放器资源
      if (video.value) {
        video.value.pause();
        video.value.removeAttribute("src");
        video.value.load();
      }
    });

    return () => (
      <div class={style.video}>
        <video
          ref={video}
          src={props.url}
          controls={true}
          webkit-playsinline="true"
          playsinline="true"
          class={"w-full h-[400px]"}
        />
      </div>
    );
  },
});
